<template>
  <view class="page-container">
    <!-- 装饰背景元素 -->
    <view class="decorative-circle decorative-circle-1 animate-float-slow"></view>
    <view class="decorative-circle decorative-circle-2 animate-float"></view>
    <view class="decorative-circle decorative-circle-3 animate-float-soft"></view>
    <view class="decorative-circle decorative-circle-4 animate-float-delay"></view>
    
    <!-- 自定义导航栏 -->
    <view class="custom-navbar animate-float-soft">
      <text class="navbar-title">任务管理</text>
    </view>
    
    <!-- 主内容区 -->
    <view class="tasks-container">
      <view class="tasks-header">
        <text class="title">今日任务</text>
      </view>
    
    <view class="task-tabs">
      <view class="tab-item" :class="{ active: activeTab === 'todo' }" @click="switchTab('todo')">待完成</view>
      <view class="tab-item" :class="{ active: activeTab === 'completed' }" @click="switchTab('completed')">已完成</view>
    </view>
    
    <view class="task-list">
      <view class="empty-state" v-if="filteredTasks.length === 0">
        <image class="empty-icon" src="/static/icons/task.png" mode="aspectFit"></image>
        <text class="empty-text">{{ activeTab === 'todo' ? '暂无待完成任务' : '暂无已完成任务' }}</text>
      </view>
      
      <view class="task-item" v-for="task in filteredTasks" :key="task.id" :class="getImportanceClass(task.importanceLevel)">
        <view class="task-checkbox" @click="toggleTask(task)">
          <view class="checkbox" :class="{ checked: task.isCompleted }">
            <text class="check-icon" v-if="task.isCompleted">✓</text>
          </view>
        </view>
        
        <view class="task-content">
          <text class="task-title" :class="{ completed: task.isCompleted }">{{ task.title }}</text>
          <view class="task-meta">
          <text class="task-deadline">截止: {{ formatDate(task.dueDate) }}</text>
        </view>
          <text class="task-description">{{ task.content }}</text>
        </view>
        
        <view class="task-actions">
          <text class="action-icon edit" @click="editTask(task)">✎</text>
          <text class="action-icon delete" @click="deleteTask(task)">✕</text>
        </view>
      </view>
    </view>
    
    <view class="add-task-btn" @click="showAddTaskModal">
      <text>+</text>
    </view>
    
    <!-- 添加/编辑任务模态框 -->
    <view class="modal" v-if="showModal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">{{ editingTask ? '编辑任务' : '添加任务' }}</text>
          <text class="close-btn" @click="closeModal">✕</text>
        </view>
        
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">任务标题</text>
            <input 
              type="text" 
              v-model="taskForm.title" 
              placeholder="请输入任务标题"
              class="form-input task-title-input"
              :disabled="false"
              :readonly="false"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">截止时间</text>
            <view class="date-input-wrapper">
              <input 
                type="text" 
                v-model="taskForm.deadline" 
                placeholder="点击选择日期" 
                class="form-input date-input task-deadline-input"
                :disabled="false"
                :readonly="true"
              />
              <button class="select-date-btn" @click.stop="selectDate">
                  <text class="btn-icon">📅</text> 选择日期
                </button>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">任务内容</text>
            <textarea 
                v-model="taskForm.description" 
                placeholder="请输入任务内容" 
                class="form-textarea"
                :disabled="false"
                :readonly="false"
                auto-height></textarea>
          </view>
          
          <view class="form-item">
            <text class="form-label">肝度等级</text>
            <view class="importance-buttons">
              <button 
                :class="['importance-btn', { active: taskForm.importanceLevel === 1 }]"
                @click="setImportanceLevel(1)"
              >
                <text class="level-icon">🌱</text>
                <text class="level-text">摸鱼可选</text>
              </button>
              <button 
                :class="['importance-btn', { active: taskForm.importanceLevel === 2 }]"
                @click="setImportanceLevel(2)"
              >
                <text class="level-icon">🌿</text>
                <text class="level-text">随缘推进</text>
              </button>
              <button 
                :class="['importance-btn', { active: taskForm.importanceLevel === 3 }]"
                @click="setImportanceLevel(3)"
              >
                <text class="level-icon">🌳</text>
                <text class="level-text">爆肝必做</text>
              </button>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="btn btn-cancel" @click="closeModal">取消</button>
          <button class="btn btn-primary" @click="saveTask">保存</button>
        </view>
      </view>
    </view>
  </view>
</view>
  <!-- 自定义滚轮式日期选择器模态框 -->
  <view v-if="showDatePickerModal" class="date-picker-modal" @click="cancelDateSelection">
    <view class="picker-content" @click.stop>
      <view class="picker-header">
        <text class="cancel-btn" @click="cancelDateSelection">取消</text>
        <text class="title">选择截止日期</text>
        <text class="confirm-btn" @click="confirmDate">确定</text>
      </view>
      
      <view class="date-picker-container">
        <picker-view 
          class="picker-view"
          :value="pickerValues"
          @change="onPickerChange"
          indicator-style="height: 40px;"
          item-height="40px"
        >
          <picker-view-column>
            <view v-for="year in years" :key="year" class="picker-item">{{ year }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="month in months" :key="month" class="picker-item">{{ month }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="day in days" :key="day" class="picker-item">{{ day }}日</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { api } from '@/api';
import { formatDate } from '@/utils';

const activeTab = ref('todo');
const tasks = ref([]);
const showModal = ref(false);
const editingTask = ref(null);
// 使用响应式对象存储表单数据
// 使用Vue的watch监控importanceLevel的变化
import { watch } from 'vue';

watch(() => taskForm.importanceLevel, (newValue, oldValue) => {
  console.log('importanceLevel变化: 从', oldValue, '变为', newValue, '类型:', typeof newValue);
}, { immediate: true });

// 按钮点击事件的辅助函数
const setImportanceLevel = (level) => {
  console.log('设置importanceLevel为:', level);
  taskForm.importanceLevel = level;
  console.log('设置后的importanceLevel值:', taskForm.importanceLevel);
};

const taskForm = reactive({
    title: '',
    deadline: '',
    description: '',
    importanceLevel: 1 // 默认摸鱼可选
  });

// 根据当前tab过滤任务列表
const filteredTasks = computed(() => {
  return tasks.value.filter(task => {
    if (activeTab.value === 'completed') {
      return task.isCompleted === true;
    } else {
      return task.isCompleted === false;
    }
  });
});

// 根据重要性级别返回对应的CSS类名
const getImportanceClass = (level) => {
  // 默认返回低重要性样式
  if (level === 3) {
    return 'importance-high'; // 高重要性
  } else if (level === 2) {
    return 'importance-medium'; // 中等重要性
  } else {
    return 'importance-low'; // 低重要性（默认）
  }
};

// 为按钮添加点击事件处理，直接更新值

// 获取用户昵称
const getUserNickname = () => {
  try {
    // 从本地存储获取用户信息
    const userInfoStr = uni.getStorageSync('userInfo');
    if (userInfoStr) {
      const userInfo = typeof userInfoStr === 'string' ? JSON.parse(userInfoStr) : userInfoStr;
      return userInfo.nickname || 'default';
    }
    return 'default';
  } catch (error) {
    console.error('获取用户昵称失败:', error);
    return 'default';
  }
};

// 切换标签页
const switchTab = async (tab) => {
  activeTab.value = tab;
  // 不需要重新加载数据，computed属性会自动过滤
};

// 加载任务列表
  const loadTasks = async () => {
    try {
      console.log('开始加载任务，用户昵称:', getUserNickname());
      // 使用getTasksByCreator接口获取所有任务
      const res = await api.task.getTasksByCreator(getUserNickname());
      
      console.log('API返回结果:', res);
      // 直接使用后端返回的数据
      tasks.value = res || [];
      console.log('任务列表:', tasks.value);
    } catch (error) {
      console.error('加载任务列表失败', error);
      uni.showToast({ title: '加载失败', icon: 'none' });
      
      // 模拟数据，用于测试显示
      tasks.value = [
        {
          "id": 4,
          "title": "完成项目文档",
          "content": "编写项目需求文档和技术方案",
          "createdAt": "2025-11-06T03:04:50.000+00:00",
          "updatedAt": "2025-11-06T03:04:50.000+00:00",
          "dueDate": "2025-11-09T03:04:50.000+00:00",
          "isCompleted": false,
          "importanceLevel": 2,
          "creatorNickname": "张三"
        },
        {
          "id": 7,
          "title": "数据库优化",
          "content": "分析并优化系统数据库查询性能",
          "createdAt": "2025-11-06T03:04:50.000+00:00",
          "updatedAt": "2025-11-06T03:04:50.000+00:00",
          "dueDate": "2025-11-11T03:04:50.000+00:00",
          "isCompleted": false,
          "importanceLevel": 3,
          "creatorNickname": "张三"
        }
      ];
    }
  };

// 切换任务状态
const toggleTask = async (task) => {
  try {
    const newStatus = !task.isCompleted;
    // 使用updateTaskCompleteStatus方法更新状态，确保传递正确的参数格式
    await api.task.updateTaskCompleteStatus(task.id, newStatus);
    task.isCompleted = newStatus;
    
    // 如果状态改变，重新加载当前标签页的任务
    await loadTasks();
  } catch (error) {
    console.error('更新任务状态失败', error);
    uni.showToast({ title: '操作失败', icon: 'none' });
  }
};

// 显示添加任务模态框
const showAddTaskModal = () => {
  editingTask.value = null;
  // 先显示模态框，让Vue有时间渲染组件
  showModal.value = true;
  // 重置表单，但保留上一次选择的肝度等级
  taskForm.title = '';
  taskForm.deadline = '';
  taskForm.description = '';
  // 不重置importanceLevel，让它保持上次的值
  console.log('显示添加任务模态框时的表单状态:', { ...taskForm });
};

// 编辑任务
const editTask = (task) => {
  console.log('编辑任务数据:', task);
  
  // 设置正在编辑的任务
  editingTask.value = task;
  
  // 先显示模态框
  showModal.value = true;
  
  // 不调用resetForm，直接设置表单值
  // 简单直接地设置表单值，让Vue的响应式系统正常工作
  if (task) {
    console.log('任务标题:', task.title);
    taskForm.title = task.title || '';
    console.log('表单标题绑定后:', taskForm.title);
    
    // 处理截止日期
    if (task.dueDate) {
      try {
        const date = new Date(task.dueDate);
        if (!isNaN(date.getTime())) {
          taskForm.deadline = date.toISOString().split('T')[0];
        } else {
          taskForm.deadline = '';
        }
      } catch (e) {
        console.error('日期格式化错误:', e);
        taskForm.deadline = '';
      }
    } else {
      taskForm.deadline = '';
    }
    console.log('表单截止日期绑定后:', taskForm.deadline);
    
    // 设置任务内容
    taskForm.description = task.content || '';
    console.log('表单内容绑定后:', taskForm.description);
    
    // 设置肝度等级
    taskForm.importanceLevel = task.importanceLevel || 1;
    console.log('表单肝度等级绑定后:', taskForm.importanceLevel);
  }
};

// 删除任务
const deleteTask = async (task) => {
  uni.showModal({
    title: '删除任务',
    content: '确定要删除这个任务吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await api.task.deleteTask(task.id);
          await loadTasks();
          uni.showToast({ title: '已删除', icon: 'success' });
        } catch (error) {
          console.error('删除任务失败', error);
          uni.showToast({ title: '操作失败', icon: 'none' });
        }
      }
    }
  });
};

// 滚轮式日期选择器状态
const showDatePickerModal = ref(false);
const pickerValues = ref([0, 0, 0]);

// 日期选择器相关计算属性
const years = computed(() => {
  const currentYear = new Date().getFullYear();
  const result = [];
  for (let i = 0; i <= 5; i++) {
    result.push(currentYear + i);
  }
  return result;
});

// 修复月份计算属性，确保只显示1-12月
const months = computed(() => {
  const result = [];
  // 明确限制为1-12月
  for (let i = 1; i <= 12; i++) {
    result.push(i);
  }
  return result;
});

const days = computed(() => {
  const [yearIndex, monthIndex] = pickerValues.value;
  const currentYear = years.value[yearIndex];
  const currentMonth = monthIndex + 1; // 月份从0开始
  const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
  
  const result = [];
  for (let i = 1; i <= daysInMonth; i++) {
    result.push(i);
  }
  return result;
});

// 选择日期函数 - 使用自定义滚轮式日期选择器
const selectDate = () => {
  // 先初始化日期，然后再显示模态框，确保days计算属性能正确计算
  let date = new Date();
  if (taskForm.deadline) {
    try {
      const parsedDate = new Date(taskForm.deadline);
      // 检查日期是否有效
      if (!isNaN(parsedDate.getTime())) {
        date = parsedDate;
      }
    } catch (e) {
      console.error('解析现有日期失败:', e);
    }
  }
  
  const year = date.getFullYear();
  const yearIndex = years.value.findIndex(y => y === year);
  const monthIndex = date.getMonth();
  const day = date.getDate();
  
  // 临时设置pickerValues以确保days计算属性正确更新
  pickerValues.value = [
    yearIndex >= 0 ? yearIndex : 0,
    monthIndex,
    0 // 临时设置为0，稍后会更新
  ];
  
  // 显示模态框
  showDatePickerModal.value = true;
  
  // 在下一个事件循环中更新日期值，确保days数组已正确计算
  setTimeout(() => {
    // 确保日期不超出当前月份的天数
    const maxDayIndex = days.value.length - 1;
    const dayIndex = Math.min(day - 1, maxDayIndex);
    
    // 最终设置完整的pickerValues
    pickerValues.value = [
      yearIndex >= 0 ? yearIndex : 0,
      monthIndex,
      dayIndex
    ];
  }, 0);
};

// 处理滚轮值变化
const onPickerChange = (e) => {
  pickerValues.value = e.detail.value;
};

// 确认选择的日期
const confirmDate = () => {
  const [yearIndex, monthIndex, dayIndex] = pickerValues.value;
  
  // 获取选中的年份和月份
  const year = years.value[yearIndex];
  // 确保月份不会超过12，使用Math.min限制
  const month = Math.min(monthIndex + 1, 12); // 月份从0开始，需要+1
  const day = Math.min(dayIndex + 1, days.value.length); // 确保不超出当前月份的天数
  
  // 格式化选中的日期为YYYY-MM-DD格式
  const selectedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
  taskForm.deadline = selectedDate;
  
  showDatePickerModal.value = false;
  uni.showToast({ title: '日期选择成功', icon: 'success' });
};

// 取消日期选择
const cancelDateSelection = () => {
  showDatePickerModal.value = false;
};

// 日期输入模态框（备用方案，保留以确保兼容性）
const showDateInputModal = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth();
  const day = now.getDate();
  
  // 如果已经有截止日期，可以尝试解析它作为默认值
  let selectedYear = year;
  let selectedMonth = month + 1; // 月份从1开始
  let selectedDay = day;
  
  if (taskForm.deadline) {
    try {
      const dateParts = taskForm.deadline.split('-');
      if (dateParts.length === 3) {
        selectedYear = parseInt(dateParts[0]);
        selectedMonth = parseInt(dateParts[1]);
        selectedDay = parseInt(dateParts[2]);
      }
    } catch (e) {
      console.error('解析现有日期失败:', e);
    }
  }
  
  // 使用uni.showModal作为临时备用方案
  let dateInput = `${selectedYear}-${String(selectedMonth).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`;
  
  uni.showModal({
    title: '选择日期',
    content: `请选择以下格式输入日期: YYYY-MM-DD\n例如: ${dateInput}`,
    editable: true,
    placeholderText: dateInput,
    success: (res) => {
      if (res.confirm) {
        // 验证输入的日期格式
        const datePattern = /^\d{4}-\d{2}-\d{2}$/;
        if (datePattern.test(res.content)) {
          // 进一步验证日期是否有效
          const parts = res.content.split('-');
          const testDate = new Date(parts[0], parts[1] - 1, parts[2]);
          if (testDate.getFullYear() == parts[0] && 
              testDate.getMonth() + 1 == parts[1] && 
              testDate.getDate() == parts[2]) {
            taskForm.deadline = res.content;
            uni.showToast({ title: '日期选择成功', icon: 'success' });
          } else {
            // 无效日期，使用今天
            const today = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
            taskForm.deadline = today;
            uni.showToast({ title: '无效的日期，已设置为今天', icon: 'none' });
          }
        } else {
          // 格式不正确，使用今天
          const today = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
          taskForm.deadline = today;
          uni.showToast({ title: '日期格式不正确，已设置为今天', icon: 'none' });
        }
      }
    }
  });
};

// 保存任务
const saveTask = async () => {
  if (!taskForm.title.trim()) {
    uni.showToast({ title: '请输入任务标题', icon: 'none' });
    return;
  }
  
  // 添加详细调试日志，查看当前表单中的肝度等级值
  console.log('保存任务前的taskForm完整状态:', { ...taskForm });
  console.log('保存任务前的肝度等级值:', taskForm.importanceLevel, typeof taskForm.importanceLevel);
  
  // 确保importanceLevel是数字类型
  const importanceLevelNum = Number(taskForm.importanceLevel);
  console.log('转换为数字后的肝度等级:', importanceLevelNum, typeof importanceLevelNum);
  
  try {
    if (editingTask.value) {
        // 编辑现有任务
      // 转换taskForm为后端需要的格式
      const updateData = {
        title: taskForm.title,
        content: taskForm.description, // 前端使用description，后端使用content
        dueDate: taskForm.deadline,
        importanceLevel: taskForm.importanceLevel, // 使用选择的肝度等级
        isCompleted: false // 编辑任务时默认设为待完成状态
      };
      
      // 详细调试日志
      console.log('准备更新任务，传递给API的数据:', updateData);
      
      await api.task.updateTask(editingTask.value.id, updateData);
      // 同时更新本地任务状态，确保UI立即反映变化
      editingTask.value.isCompleted = false;
      editingTask.value.importanceLevel = taskForm.importanceLevel; // 同步更新本地肝度等级
      console.log('任务更新成功，本地任务数据:', editingTask.value);
      
      uni.showToast({ title: '已更新', icon: 'success' });
    } else {
      // 创建新任务
      // 转换为后端需要的格式
      const createData = {
        title: taskForm.title,
        content: taskForm.description, // 前端使用description，后端使用content
        creatorNickname: getUserNickname(), // 从用户信息中获取nickname
        importanceLevel: taskForm.importanceLevel, // 使用选择的肝度等级
        isCompleted: false,
        dueDate: taskForm.deadline
      };
      
      // 详细调试日志
      console.log('准备创建任务，传递给API的数据:', createData);
      
      await api.task.createTask(createData);
      console.log('任务创建成功，使用的肝度等级:', taskForm.importanceLevel);
      
      uni.showToast({ title: '已创建', icon: 'success' });
    }
    
    closeModal();
    await loadTasks();
  } catch (error) {
    console.error(editingTask.value ? '更新任务失败' : '创建任务失败', error);
    uni.showToast({ title: '操作失败', icon: 'none' });
  }
};

// 关闭模态框
const closeModal = () => {
  showModal.value = false;
  resetForm();
};

// 重置表单
const resetForm = () => {
  console.log('执行resetForm前的表单状态:', { ...taskForm });
  taskForm.title = '';
  taskForm.deadline = '';
  taskForm.description = '';
  // 不再在这里重置importanceLevel，让它保持上一次选择的值
  // taskForm.importanceLevel = 1; // 不再强制重置为默认值
  console.log('执行resetForm后的表单状态:', { ...taskForm });
};

// 初始加载
loadTasks();
</script>

<style scoped>
  .page-container {
    min-height: 100vh;
    background-color: #FFF5F7;
    padding-top: calc(env(safe-area-inset-top, 0) + 20px);
    position: relative;
    overflow: hidden;
  }
  
  .decorative-circle {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    filter: blur(20rpx);
  }
  
  .decorative-circle-1 {
    width: 600rpx;
    height: 600rpx;
    background-color: #FFD7E5;
    opacity: 0.4;
    top: -200rpx;
    right: -200rpx;
  }
  
  .decorative-circle-2 {
    width: 400rpx;
    height: 400rpx;
    background-color: #E6C7F0;
    opacity: 0.3;
    bottom: -100rpx;
    left: -100rpx;
  }
  
  .decorative-circle-3 {
    width: 300rpx;
    height: 300rpx;
    background-color: #FFEEF2;
    opacity: 0.5;
    top: 50vh;
    right: 100rpx;
  }
  
  .decorative-circle-4 {
    width: 200rpx;
    height: 200rpx;
    background-color: #FFC8DD;
    opacity: 0.4;
    bottom: 30vh;
    right: 200rpx;
  }
  
  .custom-navbar {
    background: linear-gradient(135deg, #FF85A2, #C397FF);
    padding: 20rpx 30rpx 30rpx;
    box-shadow: 0 8rpx 24rpx rgba(255, 133, 162, 0.4);
    position: relative;
    z-index: 1;
    border-radius: 0 0 40rpx 40rpx;
    margin-bottom: 20rpx;
  }
  
  .navbar-title {
    font-size: 44rpx;
    font-weight: bold;
    color: white;
    text-align: center;
    display: block;
    text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    letter-spacing: 2rpx;
  }
  
  .tasks-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - env(safe-area-inset-top, 0) - 20px);
    background-color: transparent;
    padding: 0 30rpx 30rpx;
  }
  
  .tasks-header {
    padding: 30rpx 0;
    background-color: transparent;
  }
  
  .title {
    font-size: 40rpx;
    font-weight: 700;
    color: #FF5E8E;
    text-shadow: 2rpx 2rpx 6rpx rgba(255, 94, 142, 0.2);
  }
  
  .task-tabs {
    display: flex;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10rpx);
    margin: 0 0 30rpx;
    border-radius: 30rpx;
    padding: 8rpx;
    box-shadow: 0 4rpx 16rpx rgba(255, 133, 162, 0.15);
  }
  
  .tab-item {
    flex: 1;
    padding: 24rpx 0;
    text-align: center;
    font-size: 34rpx;
    color: #999;
    border-radius: 26rpx;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    overflow: hidden;
  }
  
  .tab-item.active {
    background: linear-gradient(135deg, #FF85A2, #FFB0D5);
    color: white;
    box-shadow: 0 4rpx 12rpx rgba(255, 133, 162, 0.4);
    transform: translateY(-2rpx);
  }
  
  .tab-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: all 0.5s ease;
  }
  
  .tab-item.active::before {
    left: 100%;
  }
  
  .task-list {
    flex: 1;
    padding: 0 30rpx 30rpx;
    overflow-y: auto;
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50vh;
    color: var(--text-secondary);
  }
  
  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    opacity: 0.6;
    margin-bottom: 30rpx;
    filter: drop-shadow(0 4rpx 10rpx rgba(0, 0, 0, 0.1));
  }
  
  .empty-text {
    font-size: 34rpx;
    color: var(--text-primary);
  }
  
  .task-item {
    display: flex;
    align-items: flex-start;
    padding: 30rpx;
    border-radius: 32rpx;
    margin-bottom: 28rpx;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10rpx);
  }
  
  .task-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12rpx;
    height: 100%;
    border-radius: 6rpx 0 0 6rpx;
  }
  
  /* 高重要性任务样式 - 鲜艳粉色 */
  .task-item.importance-high {
    background-color: rgba(255, 199, 209, 0.35);
    box-shadow: 0 6rpx 20rpx rgba(255, 133, 162, 0.25);
    border-left: 12rpx solid #FF85A2;
  }
  
  .task-item.importance-high::before {
    background-color: #FF85A2;
  }
  
  /* 中等重要性任务样式 - 紫色 */
  .task-item.importance-medium {
    background-color: rgba(221, 188, 255, 0.35);
    box-shadow: 0 6rpx 20rpx rgba(195, 151, 255, 0.25);
    border-left: 12rpx solid #C397FF;
  }
  
  .task-item.importance-medium::before {
    background-color: #C397FF;
  }
  
  /* 低重要性任务样式 - 柔和粉色 */
  .task-item.importance-low {
    background-color: rgba(255, 235, 242, 0.35);
    box-shadow: 0 6rpx 20rpx rgba(255, 176, 213, 0.2);
    border-left: 12rpx solid #FFD7E5;
  }
  
  .task-item.importance-low::before {
    background-color: #FFD7E5;
  }
  
  .task-item:hover {
    transform: translateY(-6rpx) scale(1.01);
    box-shadow: 0 12rpx 32rpx rgba(255, 133, 162, 0.3);
  }
  
  .task-item:active {
    transform: translateY(-2rpx);
  }
  
  .task-checkbox {
    margin-right: 24rpx;
    margin-top: 8rpx;
  }
  
  .checkbox {
    width: 48rpx;
    height: 48rpx;
    border: 4rpx solid #FFD7E5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: white;
    box-shadow: 0 2rpx 8rpx rgba(255, 133, 162, 0.1);
  }
  
  .checkbox.checked {
    background: linear-gradient(135deg, #FF85A2, #C397FF);
    border-color: #FF85A2;
    box-shadow: 0 4rpx 12rpx rgba(255, 133, 162, 0.4);
    transform: scale(1.1);
  }
  
  .check-icon {
    color: white;
    font-size: 28rpx;
    font-weight: bold;
    animation: checkScale 0.3s ease;
  }
  
  @keyframes checkScale {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  
  .task-content {
    flex: 1;
  }
  
  .task-title {
    font-size: 34rpx;
    color: #333;
    line-height: 52rpx;
    margin-bottom: 12rpx;
    display: block;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  
  .task-title.completed {
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
  }
  
  .task-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12rpx;
    font-size: 28rpx;
    color: #999;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 8rpx 16rpx;
    border-radius: 16rpx;
    align-items: center;
  }
  
  .task-deadline {
    font-weight: 500;
    color: #FF85A2;
  }
  
  .task-description {
    font-size: 30rpx;
    color: #666;
    line-height: 48rpx;
    opacity: 0.9;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 16rpx;
    border-radius: 16rpx;
    margin-top: 8rpx;
  }
  
  .task-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 24rpx;
    gap: 20rpx;
  }
  
  .action-icon {
    font-size: 36rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }
  
  .edit {
    color: #C397FF;
  }
  
  .edit:hover, .edit:active {
    background-color: rgba(195, 151, 255, 0.2);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4rpx 12rpx rgba(195, 151, 255, 0.3);
  }
  
  .delete {
    color: #FF85A2;
  }
  
  .delete:hover, .delete:active {
    background-color: rgba(255, 133, 162, 0.2);
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 4rpx 12rpx rgba(255, 133, 162, 0.3);
  }
  
  .add-task-btn {
    position: fixed;
    bottom: 60rpx;
    right: 60rpx;
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF85A2, #C397FF);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64rpx;
    box-shadow: 0 12rpx 36rpx rgba(255, 133, 162, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    animation: float 3s ease-in-out infinite;
  }
  
  .add-task-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 16rpx 48rpx rgba(255, 133, 162, 0.6);
  }
  
  .add-task-btn:active {
    transform: scale(0.95);
  }
  
  .add-task-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #FF85A2, #C397FF);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.7;
    filter: blur(20rpx);
    animation: pulse 3s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 0.5; }
    100% { transform: scale(1); opacity: 0.7; }
  }
  
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    pointer-events: auto;
    backdrop-filter: blur(12rpx);
  }
  
  .modal-content {
    width: 90%;
    max-width: 700rpx;
    max-height: 80vh;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20rpx);
    border-radius: 36rpx;
    overflow: hidden;
    pointer-events: auto;
    z-index: 1000;
    box-shadow: 0 24rpx 72rpx rgba(255, 133, 162, 0.3);
    display: flex;
    flex-direction: column;
    position: relative;
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12rpx;
    background: linear-gradient(90deg, #FF85A2, #C397FF);
  }
  
  @keyframes modalSlideIn {
    0% {
      opacity: 0;
      transform: translateY(-50rpx) scale(0.95);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36rpx 40rpx;
    border-bottom: 1rpx solid #FFE6ED;
  }
  
  .modal-title {
    font-size: 38rpx;
    font-weight: 700;
    color: #FF5E8E;
    text-shadow: 1rpx 1rpx 3rpx rgba(255, 94, 142, 0.1);
  }
  
  .close-btn {
    font-size: 48rpx;
    color: #FF85A2;
    padding: 10rpx;
    transition: all 0.3s ease;
    background-color: rgba(255, 133, 162, 0.05);
    border-radius: 50%;
    width: 64rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .close-btn:active {
    color: #FF5E8E;
    background-color: rgba(255, 133, 162, 0.15);
    transform: scale(0.9);
  }
  
  .modal-body {
    padding: 40rpx;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(80vh - 160rpx);
  }
  
  .form-item {
    margin-bottom: 48rpx;
    animation: fadeInUp 0.5s ease;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .form-label {
    display: block;
    margin-bottom: 16rpx;
    font-size: 30rpx;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.3s ease;
    position: relative;
    padding-left: 8rpx;
  }
  
  .form-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4rpx;
    height: 24rpx;
    background-color: var(--primary-color);
    border-radius: 2rpx;
  }
  
  .form-input, .form-textarea {
    width: 100%;
    padding: 32rpx;
    border: 3rpx solid #FFD7E5;
    border-radius: 24rpx;
    font-size: 32rpx;
    box-sizing: border-box;
    background-color: white;
    pointer-events: auto;
    user-select: text;
    color: #333 !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 100rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3rpx 12rpx rgba(255, 133, 162, 0.1);
  }
  
  .form-input::placeholder, .form-textarea::placeholder {
    color: #FFB0D5;
    opacity: 0.7;
  }
  
  /* 特别强调标题输入框 */
  .task-title-input {
    background-color: rgba(255, 217, 236, 0.3);
    border-color: #FF85A2;
    font-weight: 600;
  }
  
  .task-title-input:focus {
    box-shadow: 0 0 0 6rpx rgba(255, 133, 162, 0.25);
    border-color: #FF5E8E;
  }
  
  /* 特别强调日期输入框 */
  .task-deadline-input {
    background-color: rgba(255, 217, 236, 0.2);
    border-color: #FFB0D5;
  }
  
  .task-deadline-input:focus {
    box-shadow: 0 0 0 6rpx rgba(255, 133, 162, 0.2);
    border-color: #FF85A2;
  }
  
  .form-input:focus, .form-textarea:focus {
    border-color: #FF85A2;
    outline: none;
    transform: translateY(-3rpx);
    box-shadow: 0 6rpx 20rpx rgba(255, 133, 162, 0.2);
  }
  
  .date-input-wrapper {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }
  
  .date-input {
    flex: 1;
  }
  
  .select-date-btn {
    padding: 30rpx 36rpx;
    font-size: 28rpx;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    border: none;
    border-radius: 20rpx;
    min-width: 220rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 12rpx rgba(255, 133, 162, 0.3);
    font-weight: 500;
  }
  
  .btn-icon {
    font-size: 32rpx;
  }
  
  .select-date-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 6rpx rgba(255, 133, 162, 0.2);
  }
  
  .form-textarea {
    min-height: 200rpx;
    resize: none;
    line-height: 48rpx;
    transition: all 0.3s ease;
  }
  
  /* 肝度等级按钮组样式 - 改进为水平布局 */
  .importance-buttons {
    display: flex;
    gap: 20rpx;
    flex-wrap: wrap;
  }
  
  .importance-btn {
    flex: 1;
    min-width: 200rpx;
    padding: 36rpx 24rpx;
    border: 3rpx solid #FFD7E5;
    border-radius: 28rpx;
    background-color: white;
    color: #999;
    font-size: 28rpx;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(255, 133, 162, 0.1);
  }
  
  .importance-btn:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 24rpx rgba(255, 133, 162, 0.15);
  }
  
  .importance-btn.active {
    transform: translateY(-6rpx);
    font-weight: 600;
    box-shadow: 0 8rpx 24rpx rgba(255, 133, 162, 0.25);
    animation: bounceSoft 0.5s ease;
  }
  
  /* 为不同等级添加明显区分的激活颜色和阴影 */
  .importance-btn:nth-child(1).active {
    border-color: #FFB0D5;
    background-color: rgba(255, 217, 236, 0.4);
    color: #FF85A2;
    box-shadow: 0 8rpx 24rpx rgba(255, 176, 213, 0.3);
  }
  
  .importance-btn:nth-child(2).active {
    border-color: #C397FF;
    background-color: rgba(221, 188, 255, 0.4);
    color: #A76EEF;
    box-shadow: 0 8rpx 24rpx rgba(195, 151, 255, 0.3);
  }
  
  .importance-btn:nth-child(3).active {
    border-color: #FF85A2;
    background-color: rgba(255, 199, 209, 0.4);
    color: #E65E82;
    box-shadow: 0 8rpx 24rpx rgba(255, 133, 162, 0.3);
  }
  
  .level-icon {
    font-size: 40rpx;
  }
  
  .level-text {
    font-size: 28rpx;
  }
  
  .modal-footer {
    display: flex;
    border-top: 1rpx solid var(--border-light);
    padding: 30rpx 20rpx;
    width: 100%;
    box-sizing: border-box;
  }
  
  .btn {
    flex: 1;
    padding: 36rpx 0;
    font-size: 34rpx;
    border: none;
    font-weight: 600;
    border-radius: 28rpx;
    margin: 0 12rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    opacity: 1;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }
  
  .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: all 0.5s ease;
  }
  
  .btn:active::before {
    left: 100%;
  }
  
  .btn-cancel {
    background-color: #FFE6ED;
    color: #FF85A2;
  }
  
  .btn-cancel:active {
    background-color: #FFD7E5;
    transform: scale(0.98);
  }
  
  .btn-primary {
    background: linear-gradient(135deg, #FF85A2, #C397FF);
    color: #fff;
    box-shadow: 0 6rpx 16rpx rgba(255, 133, 162, 0.4);
  }
  
  .btn-primary:active {
    box-shadow: 0 4rpx 12rpx rgba(255, 133, 162, 0.3);
    transform: scale(0.98);
  }
  
  /* 确保表单元素在不同平台上正常工作 */
  * {
    box-sizing: border-box;
  }
  
  .form-input,
  .form-textarea {
    position: relative;
    z-index: 1001;
  }
  
  /* 禁用iOS默认样式 */
  .form-input {
    -webkit-appearance: none;
  }
  
  /* 优化移动端体验 */
  @media screen and (max-width: 768px) {
    .modal-content {
      width: 95%;
      margin: 0 20rpx;
    }
    
    .modal-body {
      padding: 30rpx;
    }
  }
  
  /* 自定义滚轮式日期选择器样式 */
  .date-picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 9999;
    backdrop-filter: blur(8rpx);
  }
  
  .picker-content {
    background-color: var(--paper-color);
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;
    position: relative;
  }
  
  .picker-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8rpx;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  }
  
  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
  }
  
  .cancel-btn,
  .confirm-btn {
    font-size: 16px;
    padding: 8px 16px;
  }
  
  .cancel-btn {
    color: var(--text-secondary);
  }
  
  .confirm-btn {
    color: var(--primary-color);
    font-weight: 600;
  }
  
  .title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
  }
  
  .date-picker-container {
    height: 200px;
    padding: 10px 0;
  }
  
  .picker-view {
    width: 100%;
    height: 100%;
  }
  
  .picker-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    font-size: 16px;
    color: var(--text-primary);
    transition: all 0.3s ease;
  }
  
  /* 为指示器区域添加样式，增强视觉效果 */
  uni-picker-view {
    background: rgba(255, 255, 255, 0.9);
  }
  
  uni-picker-view-column {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 添加多种动画效果 */
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15rpx);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes float-slow {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20rpx);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes float-soft {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8rpx);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes float-delay {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-12rpx);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes bounceSoft {
    0%, 100% {
      transform: translateY(-6rpx);
    }
    50% {
      transform: translateY(-12rpx);
    }
  }
  
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  .animate-float-slow {
    animation: float-slow 4s ease-in-out infinite;
  }
  
  .animate-float-soft {
    animation: float-soft 2.5s ease-in-out infinite;
  }
  
  .animate-float-delay {
    animation: float-delay 3.5s ease-in-out infinite 0.5s;
  }
  
  /* 过渡效果 */
  .transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 悬停缩放效果 */
  .hover-scale:hover {
    transform: scale(1.03);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 确保所有交互元素都有平滑过渡 */
  button, .action-icon, .tab-item, .checkbox {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* 任务完成动画 */
  .task-item.task-completed {
    animation: taskComplete 0.5s ease-out;
  }
  
  @keyframes taskComplete {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }
</style>